<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换</title>
</head>
<style>
   @font-face {
    font-family: 'iconfont';
    src: url('font/iconfont.eot');
    src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
        url('font/iconfont.woff2') format('woff2'),
        url('font/iconfont.woff') format('woff'),
        url('font/iconfont.ttf') format('truetype'),
        url('font/iconfont.svg#iconfont') format('svg');
    }
    .iconfont {
    font-family: "iconfont" !important;
    font-size: 50px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    a{
        color: #888;
        text-decoration: none;
    }
    body{
        background-color: #ccc;
    }
    #apply{
        margin: 200px auto;
        width: 800px;
        height: 500px;
        background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597004668789&di=8376aef39c55de12a6d9ca2c88d8b3d2&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F52%2F00%2F6357931b6ead28e.jpg);
    }
    a.left{
        padding: 220px 0;
        float: left;
    }
    a.right{
        padding: 220px 0;
        float: right;
    }
    img{
        margin: 20px 50px;
    }
    a:hover{
        color: #000;
    }
</style>
<body>
    <div id="apply">
        <img src="" alt="" width="600px" :src="imgSrc[index]">
        <a href="#" class="iconfont left" @click="prev" v-show="index!=0">&#xe511;</a>
        <a href="#" class="iconfont right" @click="next" v-show="index!=imgSrc.length-1">&#xe604;</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var apply=new Vue({
            el:"#apply",
            data:{
                imgSrc:["images/M1.jpeg","images/M2.jpeg","images/M3.jpeg","images/M4.jpeg","images/M5.jpeg","images/M6.jpeg","images/M7.jpeg","images/M8.jpeg"],
                index:0
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    // this.index=(this.index+1)%this.imgSrc.length;
                    this.index++;
                }
            }
        })
    </script>
</body>
</html>